<template>
  <div id="clock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
    <p class="name">数字时钟</p>
  </div>
</template>
 <script>
import axios from "axios";

export default {
  data() {
    return {
      time: "",
      date: "",
    };
  },
  created() {
    setInterval(this.updateTime, 500);
  },
  methods: {
    updateTime() {
      axios.get("/api/time").then((res) => {
        this.time =
          res.data[0] +
          "年" +
          res.data[1] +
          "月" +
          res.data[2] +
          "日" +
          "\n" +
          res.data[3] +
          "时" +
          res.data[4] +
          "分" +
          res.data[5] +
          "秒";
      });
      // this.time =
      //   this.zeroPadding(cd.getHours(), 2) +
      //   ":" +
      //   this.zeroPadding(cd.getMinutes(), 2) +
      //   ":" +
      //   this.zeroPadding(cd.getSeconds(), 2);
    },
    // zeroPadding(num, digit) {
    //   var zero = "";
    //   for (var i = 0; i < digit; i++) {
    //     zero += "0";
    //   }
    //   console.log()
    //   return (zero + num).slice(-digit);
    // },
  },
};

// import {Vue} from "vue";
// var clock = new Vue({
//   el: "#clock",
//   data(){
//     return {
//     time: "",
//     date: "",
//   }},
// });

// var week = [
//   "星期天",
//   "星期一",
//   "星期二",
//   "星期三",
//   "星期四",
//   "星期五",
//   "星期六",
// ];
// // var timerID = setInterval(updateTime, 1000);
// updateTime();
// function updateTime() {
//   var cd = new Date();
//   clock.time =
//     zeroPadding(cd.getHours(), 2) +
//     ":" +
//     zeroPadding(cd.getMinutes(), 2) +
//     ":" +
//     zeroPadding(cd.getSeconds(), 2);
//   clock.date =
//     zeroPadding(cd.getFullYear(), 4) +
//     "-" +
//     zeroPadding(cd.getMonth() + 1, 2) +
//     "-" +
//     zeroPadding(cd.getDate(), 2) +
//     " " +
//     week[cd.getDay()];
// }

// function zeroPadding(num, digit) {
//   var zero = "";
//   for (var i = 0; i < digit; i++) {
//     zero += "0";
//   }
//   return (zero + num).slice(-digit);
// }
//
</script>


<style scoped>
/* html,
body {
  height: 100%;
} */

body {
  background: #0f3854;
  background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #f1d9d9 70%);
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
  background-size: 100%;
}

p {
  margin: 0;
  padding: 0;
}

#clock {
  font-family: "Share Tech Mono", monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #1c8aa8;
  text-shadow: 0 0 20px #bdd4db, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
  letter-spacing: 0.05em;
  font-size: 80px;
  padding: 5px 0;
}
#clock .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
#clock .name {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}
</style>

